<template>
  <h4 class="flex items-center title">
    <img class="icon" :src="getImageUrl(icon || 'changeInfo')" /> {{ text || '' }}
    <span class="text-gray-500 subText" v-if="subText">{{ subText }}</span>
  </h4>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'FormTitle',
    props: ['text', 'icon', 'subText'],
    setup() {
      function getImageUrl(path = 'changeInfo') {
        if (path === 'meters') {
          return new URL(`/src/assets/images/paperInstall/${path}.png`, import.meta.url).href;
        } else {
          return new URL(`/src/assets/images/manageList/${path}.png`, import.meta.url).href;
        }
      }
      return { getImageUrl };
    },
  });
</script>
<style lang="less" scoped>
  .title {
    font-size: 18px;
    font-weight: 500;
  }
  .icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    @media (max-width: @screen-xl) {
      width: 14px;
      height: 14px;
    }
  }
  .subText {
    font-size: 14px;
    font-weight: 400;
  }
</style>
